<template>
  <el-aside width="220px" class="image-aside" v-loading="loading">
    <div class="top">
      <AsideList 
        v-for="item in list"
        :key="item.id"
        :active="activeId == item.id"
        @edit="handleEdit(item)"
        @delete="handleDelelte(item.id)"
        @click="handleChangeActiveId(item.id)"
      >
        {{ item.name }}
      </AsideList>
    </div>
    <div class="bottom">
      <el-pagination
        background
        layout="prev, next" 
        :total="total"
        :current-page="currentPage"
        :page-sizes="limit"
        @current-change="getData"
      />
    </div>
  </el-aside>
  <FormDrawer 
    ref="formDrawerRef"
    :title="drawerTitle"
    @submit="handlsubmit"
  >
    <el-form :model="formData" ref="formRef" :rules="rules" label-width="80px" :inline="false">
      <el-form-item label="分类名称" prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="order">
        <el-input-number v-model="formData.order" :min="0" :max="10000" />
      </el-form-item>
    </el-form>
  </FormDrawer>
</template>

<script lang='ts' setup>

import AsideList from './AsideList.vue';
import { 
  getImageClassList, 
  createImageClassList, 
  updataImageClassList,
  deteleImageClassList
} from '@/services/image_class';
import FormDrawer from './FormDrawer.vue';
import { msgSuccess } from '@/composables/util';


// data 数值
const loading = ref<boolean>(false) //loading 加载
const list = ref<any>([]) //列表数据
const activeId = ref<number>(0)

// 分页
const currentPage = ref<number>(1)  //当前页数
const total = ref<number>(0)  //总条数
const limit = ref<number>(10) //一页多少条

// form
type formDataType = ({
  name: String
  order: number
})
const formData = reactive<formDataType>({
  name: '',
  order: 50
})

const editId = ref<number>(0)
const drawerTitle = computed(()=>editId.value ? '编辑' : '新增')

// 弹窗数值内的 规则
const rules = ref({
  name:[{
    required: true, // 必填
    message: '请输入', //提示信息
    trigger: 'blur' // 触发条件
  }],
})

const formRef = ref<any>(null)

// =====事件=====
// 获取列表
const getData = (p:any=null) =>{  // p=null 意思是不传值，默认为空
  // console.log(p);
  if(typeof p == 'number'){
    currentPage.value = p
  }
  loading.value = true
  getImageClassList(currentPage.value)
  .then((res)=>{
    // console.log(res.data.data)
    list.value = res.data.data.list
    total.value = res.data.data.totalCount
    let listId = list.value[0]  // 获取数组的第一个数组
    if(list){
      handleChangeActiveId(listId.id) // 使列表中第一个处于激活状态，再去获取分类下的 图库列表
    }
  })
  .finally(()=>{
    loading.value = false
  })
}


// 弹窗
const formDrawerRef = ref<any>(null)

// 新建
const handlCreate = () => { 
  editId.value = 0
  formData.name = ''
  formData.order = 50
  formDrawerRef.value.open()
}

// 编辑
const handleEdit = (val:any) =>{
  console.log(val)
  editId.value = val.id
  formData.name = val.name,
  formData.order = val.order
  formDrawerRef.value.open()  //打开弹窗
  // updataImageClassList
}
// 删除
const handleDelelte = (val:number) =>{
  formDrawerRef.value.showLoading()
  deteleImageClassList(val)
  .then(()=>{
    msgSuccess('删除成功')
    getData(currentPage.value)
  })
  .finally(()=>{
    formDrawerRef.value.hideLoading()
  })
}

//  form提交 事件 
const handlsubmit = () =>{
  formRef.value.validate((valid:any)=>{
    // console.log(valid)
    if(!valid) return
    // 新增数据
    formDrawerRef.value.showLoading()
    const promise = editId.value? updataImageClassList(editId.value,formData) :  createImageClassList(formData)
    promise.then((res:any)=>{
      console.log(res.data)
      if(res.data.msg == 'ok'){
        msgSuccess( drawerTitle.value+'成功' )
        getData( editId.value ? currentPage.value : 1 )
        formDrawerRef.value.close()
      }
    })
    .finally(()=>{
      formDrawerRef.value.hideLoading()
    })
  })
}

getData()


// emit
const emit = defineEmits(['changeImage'])

// 切换分类
const handleChangeActiveId = (id:number) =>{
  activeId.value = id
  emit('changeImage',id)
}

defineExpose({
  handlCreate
})

</script>

<style scoped lang="less">
.image-aside{
  border-right: 1px solid #eeeeee;
  position: relative;
  .top{
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 50px;
    overflow-y: auto;
  }
  .bottom{
    position: absolute;
    height: 50px;
    left: 0px;
    right: 0px;
    bottom: 0;
    @apply flex items-center justify-center;
  }
}

</style>
